<h3>Customize Settings</h3>
<div *ngIf="filter" class="card bg-medium-grey mt-3 p-3 shadow">
    <div class="row">
        <!-- Portfolio and universes -->
        <div class="col-md-4 mb-4">
            <h5 class="ml-2">Universe</h5>
            <select class="form-control" [ngModel]="filter.portfolioId == null ? filter.universeId : filter.portfolioId" (change)="savePortfolioSetting($event.target)"
                [disabled]="filter.type == filterType.Standard || filter.isCurrentUserOwner==false">
                <option [value]='null' label="None"></option>
                <optgroup *ngFor="let group of groupedPortfolios" label="{{group.name}}">
                    <option *ngFor="let portfolio of group.children" [value]="portfolio.id" [attr.universe]="portfolio.type == 2">{{portfolio.name}}</option>
                </optgroup>
            </select>
        </div>
        <!-- Filter defined settings -->
        <div *ngFor='let setting of settings' class="col-md-4 mb-4">
            <h5 class="ml-2">{{ setting.name }}</h5>
            <select class="form-control" *ngIf="filter && setting.data" [(ngModel)]="filter[setting.bindField]" (change)="setting.callback($event.target)"
                [disabled]="filter.type == filterType.Standard || filter.isCurrentUserOwner==false">
                <option [value]='null' label="None"></option>
                <option *ngFor="let data of setting.data" [value]='data.id'>{{data.name}}</option>
            </select>
        </div>
    </div>
</div>